<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		    *{
		        margin: 0;
		        padding: 0;
		    }
		
		    #box{
		        width: 100px;
		        height: 100px;
		        background-color: red;
		
		        position: absolute;
		    }
		</style>
	</head>
	<body>
		
		<button id="btn">我也不知道</button>
		<button id="btn1">你知道不</button>
		<div id="box"></div>
		
		
		<script src="通用兼容文件.js"></script>
		<script>
			window.onload = function(){
			
		$('btn').onclick = function(){
			buffer(box, {"left": 800, "top": 120, "width": 230, "height": 400}, function () {
			        buffer(box, {"left": 100, "top": 100, "width": 50, "height": 200}, function () {
			            buffer(box, {"left": 500, "top": 400, "width": 250, "backgroundColor": "yellow"});
			        });
			    });
			};
	$('btn1').onclick = function(){
		buffer($('box'),{ 'left':100,'width':400 ,'heigh':300});
		
	};		
			
	};		
			
	
				
			function buffer(obj,json,fn){
				var begin = 0,end =0, speed =0;
			obj.timer = setInterval(function (){
					//找到一个可用的标志
					var joke = false;
				for(var k in json){
					begin = parseInt(getCSSAttrValue(obj,k))||0
					end = parseInt(json[k]);
					
					speed = (end-begin)*0.2;
				
					speed = (end >begin) ? Math.ceil(speed):Math.floor(speed);
					
					obj.style[k] = begin + speed +'px';
					
					if(begin === end ){
						joke =true;
					}
				}	
					
					if(joke){
						clearInterval(obj.timer);
						//检查有没有回调函数，有就调用
						console.log(fn);
						if(fn){
							fn();
						}
						
					}	
				}	,200);	
			
			}
			

			
		</script>
	</body>
</html>
